<template>
	<div class="home">
		<div style="position: fixed;top: 0;left: 0;z-index: 100;width: 100%;">
			<titleCustom :title="$route.meta.title" :backUrl="'/home'"></titleCustom>
		</div>
		<van-tabs @click="onClick" color="#2c91fc" title-active-color="#2c91fc" title-inactive-color="#333" sticky
			offset-top="50">
			<van-tab title="今日通话">
				<div class="searchClass">
					<div style="display: flex;flex-direction: row;align-items: center;">
						<van-search v-model="searchValue" shape="round" background="#f2f2f2" placeholder="请输入客户名称、电话号码"
							@search="searchCallLog" @clear="clearSearch" style="width: calc(100% - 70px);" />
						<div class="selectSearchClass" @click="popupOpen">
							<div>筛选</div>
							<img src="../../../assets/images/select.png" />
						</div>
					</div>
					<div class="totalClass">共有{{totalTitle}}条通话记录满足当前查询条件</div>
				</div>
				<div class="listClass">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
						<div class="logList" @scroll="scrollBottom" id="log">
							<div class="logItemClass" v-for="(item,index) in logList" :key="index"
								@click="goCallDetail(item,0)">
								<div class="itemLeft">
									<i class="iconfont  icon-incoming" style="color: #4898FF;" v-if="item.type==0"></i>
									<i class="iconfont  icon-outgoing" style="color: #4898FF;" v-if="item.type==1"></i>

									<!-- <van-icon name="phone" size="22" /> -->
								</div>
								<div class="itemRight">
									<div class="rightTop">
										<div class="nameClass">{{item.customerName||"[未知客户]"}}</div>
										<div class="timeClass">{{item.startTimeStr||""}}</div>
									</div>
									<div class="rightBottom">
										<div class="rbottomClass">
											<div>{{item.customerNumber}}
												({{ item.customerProvince }}/{{ item.customerCity }})</div>
											<div v-if="item.type==0&&item.hotline!=null&&item.hotline!=''">
												{{item.hotline}}-{{ item. clientName}}({{ item. cno}})
											</div>
											<div>{{item.status}} ({{ item. cno}} {{ item. clientName}})</div>
										</div>
										<div @click.stop>
											<div class="rTimeClass">
												<van-icon name="play-circle-o" size="22" color="#4898FF"
													@click="goCallDetail(item,1)"
													v-if="item.localRecordFile!=null&&item.localRecordFile!=''" />
												<!-- <van-icon name="pause-circle-o" color="#4898FF" size="22" @click="stop(index)"
                          v-if="playIndex==index&&(item.localRecordFile!=null&&item.localRecordFile!='')" />
                        <van-icon name="play-circle-o" size="22" color="#4898FF" @click="paly(item,index)"
                          v-if="playIndex!=index&&(item.localRecordFile!=null&&item.localRecordFile!='')" /> -->
												<i class="iconfont icon-asr" style="color: #4898FF;font-size: 24px;margin-left:10px;"
													v-if="item.fileStatus==1" @click="goAsr(item)"></i>
                        <img v-if="item.fileStatus==1 && item.bridgeDuration>=20" @click="goAI(item)" style="width: 24px;height: 24px;margin-left:10px;" src="@/assets/images/chat-ai-line.png"/>
											</div>
											<div class="timeClass" style="text-align: right;"
												v-if="item.bridgeDurationStr!=null&&item.bridgeDurationStr!=''&&item.bridgeDurationStr!='00:00'">
												时长:{{item.bridgeDurationStr||""}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</van-pull-refresh>
				</div>
			</van-tab>
			<van-tab title="通话记录">
				<div class="searchClass">
					<div style="display: flex;flex-direction: row;align-items: center;">
						<van-search v-model="searchValue" shape="round" background="#f2f2f2" placeholder="请输入客户名称、电话号码"
							@search="searchCallLog" @clear="clearSearch" style="width: calc(100% - 70px);" />
						<div class="selectSearchClass" @click="popupOpen">
							<div>筛选</div>
							<img src="../../../assets/images/select.png" />
						</div>
					</div>
					<div class="totalClass">共有{{totalTitle}}条通话记录满足当前查询条件</div>
				</div>
				<div class="listClass">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
						<div class="logList" @scroll="scrollBottom" id="log1">
							<div class="logItemClass" v-for="(item,index) in logList" :key="index"
								@click="goCallDetail(item,0)">
								<div class="itemLeft">
									<i class="iconfont  icon-incoming" style="color: #4898FF;" v-if="item.type==0"></i>
									<i class="iconfont  icon-outgoing" style="color: #4898FF;" v-if="item.type==1"></i>
								</div>
								<div class="itemRight">
									<div class="rightTop">
										<div class="nameClass">{{item.customerName||"[未知客户]"}}</div>
										<div class="timeClass">{{item.startTimeStr||""}}</div>
									</div>
									<div class="rightBottom">
										<div class="rbottomClass">
											<div>{{item.customerNumber}}
												({{ item.customerProvince }}/{{ item.customerCity }})</div>
											<div v-if="item.type==0&&item.hotline!=null&&item.hotline!=''">
												{{item.hotline}}-{{ item. clientName}}({{ item. cno}})
											</div>
											<div>{{item.status}} ({{ item. cno}} {{ item. clientName}})</div>
										</div>
										<div @click.stop>
											<div class="rTimeClass">
												<van-icon name="play-circle-o" color="#4898FF" size="24"
													@click="goCallDetail(item,1)"
													v-if="item.localRecordFile!=null&&item.localRecordFile!=''" />
												<!-- <van-icon name="pause-circle-o" color="#4898FF" size="24" @click="stop(index)"
                          v-if="playIndex==index&&(item.localRecordFile!=null&&item.localRecordFile!='')" />
                        <van-icon name="play-circle-o" color="#4898FF" size="24" @click="paly(item,index)"
                          v-if="playIndex!=index&&(item.localRecordFile!=null&&item.localRecordFile!='')" /> -->
												<i class="iconfont icon-asr" style="color: #4898FF;font-size: 24px;margin-left:10px;"
													v-if="item.fileStatus==1" @click="goAsr(item)"></i>
                        <img v-if="item.fileStatus==1 && item.bridgeDuration>=20" @click="goAI(item)" style="width: 24px;height: 24px;margin-left:10px;" src="@/assets/images/chat-ai-line.png"/>
											</div>
											<div class="timeClass" style="text-align: right;"
												v-if="item.bridgeDurationStr!=null&&item.bridgeDurationStr!=''&&item.bridgeDurationStr!='00:00'">
												时长:{{item.bridgeDurationStr||""}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</van-pull-refresh>
				</div>
			</van-tab>
		</van-tabs>
		<audio id="audio" preload="metadata" :src="tapeFile" />
		<div class="phoneNumberIcon" @click="show=true">
			<!-- <van-icon name="phone" size="30" color="#00BE63"/> -->
			<i class="iconfont icon-dialpad" style="color:#00BE63;font-size:50px;" />
		</div>
		<van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
			<callPhone @hiddenKey="show=false"></callPhone>
		</van-popup>
		<!-- <van-popup v-model="searchShow" position="right" :style="{ height: '100%',width:'80%' }" v-if="searchShow">
			<div class="searchPopupClass">
				<div style="padding: 20px 10px;">
					<div class="searchTitle">通话时间</div>
					<div class="search-callTime">
						<div class="timeBorder" @click="dateTimeChange">{{startTime}}</div>
						<div class="line"></div>
						<div class="timeBorder" @click="dateEndTimeChange">{{endTime}}</div>
					</div>
					<div class="searchTitle" style="margin-top: 30px;">组织及员工</div>
					<van-cell style="padding:0;margin-top: 10px;" is-link title="所属组织" :border='false'
						:value="fixCenterName" @click="handleSelectFixCenter" />
          <van-popup v-model="showFixCenterSelectPicker" position="bottom">
            <van-field name="模糊查询" input-align="left" v-model="fixCenterlikeWho" label="模糊查询" placeholder="请输入模糊查询关键词" />
            <van-picker show-toolbar :columns="fixCentercolumns" @confirm="handleSelectFixCenterConfirm" @cancel="showFixCenterSelectPicker = false"
              value-key="name" />
          </van-popup>
					<van-cell style="padding:0;margin-top: 6px;" is-link title="员工" :border='false' :value="personName"
						@click="handleSelectPerson" />
          <van-popup v-model="showPersonSelectPicker" position="bottom">
            <van-field name="模糊查询" input-align="left" v-model="personlikeWho" label="模糊查询" placeholder="请输入模糊查询关键词" />
            <van-picker show-toolbar :columns="personcolumns" @confirm="handleSelectPersonConfirm" @cancel="showPersonSelectPicker = false"
              value-key="perName" />
          </van-popup>

					<div class="searchTitle" style="margin-top: 30px;">通话类型</div>
					<div class="callTypeClass">
						<div :class="typeItem.check?'typeClass1':'typeClass' "
							v-for="(typeItem,typeIndex) in callTypeList" :key="typeIndex"
							@click="typeChange(typeIndex)">{{typeItem.name}}</div>
					</div>
					<div class="searchTitle" style="margin-top: 30px;">通话状态</div>
					<div class="callTypeClass">
						<div :class="stateItem.check?'typeClass1':'typeClass' "
							v-for="(stateItem,stateIndex) in stateList" :key="stateIndex"
							@click="stateChange(stateIndex)">{{stateItem.name}}</div>
					</div>
				</div>
				<div class="searchButtomClass">
					<div class="reloadClass" @click="reload">重置</div>
					<div class="submitClass" @click="searchConfirm">确定</div>
				</div>
			</div>
		</van-popup>
		<van-action-sheet v-model="organizationShow" :actions="actions" @select="organizationSelect"
			style="max-height:300px;" />
			<van-action-sheet v-model="userShow" :actions="userActions" @select="userSelect"
				style="max-height:300px;" />
		<van-calendar v-model="startTimeShow" @confirm="onConfirm" :show-title='false' :min-date="minDate"
			:max-date="maxDate" />
		<van-calendar v-model="endTimeShow" @confirm="onEndConfirm" :show-title='false' :min-date="minDate"
			:max-date="maxDate" /> -->
		<call-search :searchVisible='searchComShow' :tabindex="index" :fixCenterOptions="fixCenterOptions" @close='searchComShow=false' ref="callSearch" @searchUpdate='searchListUpdate'></call-search>
    <vue-chat v-if="showChat" v-model="showChat" :param="chatParams" @close="showChat = false"/>
  </div>
</template>
<script>
import callSearch from './search.vue'
import { Dialog, Notify, Toast } from 'vant'
import titleCustom from '@/components/titleCustom/title'
import callPhone from '@/pages/aicc/callPhone/callPhone'
import aiccCallApi from '@/apiaicc/aiccCallApi'
import commonApi from '@/api/commonApi'
import { getCurrentFirstDay, getCurrentLastDay, getCurrentTime } from '@/utils/util'
import VueChat from '../../aiChat/vue-chat.vue'

export default {
		components: {
      VueChat,
			titleCustom,
			callPhone,
			Toast,
			Dialog,
			Notify,
			callSearch
		},
		data() {
			return {
				searchComShow: false,
				userShow: false,
				userActions: [],
				totalTitle: 0,
				actions: [],
				callTypeList: [{
						check: false,
						name: '呼出'
					},
					{
						check: false,
						name: '呼入'
					}
				],
				stateList: [{
					check: false,
					name: '人工接听'
				}, {
					check: false,
					name: '双方接听'
				}, {
					check: false,
					name: '客户未接听'
				}, {
					check: false,
					name: '座席未接听'
				}, {
					check: false,
					name: '人工未接听'
				}, {
					check: false,
					name: '系统应答'
				}, {
					check: false,
					name: '系统未应答'
				}],
				userVlaue: '请选择员工',
				organizationShow: false,
				searchShow: false,
				startTimeShow: false,
				minDate: new Date(2010, 0, 1),
				maxDate: new Date(2024, 7, 1),
				endTimeShow: false,
				startTime: '',
				endTime: '',
				isLoading: false,
				searchValue: null,
				logList: [],
				queryParam: {
					fixCenters: [],
					pageNo: 1,
					pageSize: 10,
					searchValue: null,
					todayData: 0,
					fixCenterId: null,
					personId: null,
					startTime: null,
					endTime: null,
					type: null,
					status: null,
          callTimes: null,
				},
				index: 0,
				finished: false,
				playIndex: '-1',
				show: false,
				tapeFile: "",
				fixCenterList: [],
				fixCenterOptions: [],
				fixCenterName: '请选择组织',
				fixCenterId: '',
				showFixCenterSelectPicker: false,
				fixCentercolumns: [],
				fixCenterlikeWho: '',
				personOptions: [],
				personName: '请选择员工',
				personId: '',
				showPersonSelectPicker: false,
				personcolumns: [],
				personlikeWho: '',
        showChat: false,
        chatParams: {}
			}
		},
		mounted() {
			let that = this
      that.showChat = false
      that.chatParams = {}
			that.getMainFixCenter()
			window.addEventListener('scroll', that.throttle(this.scrollBottom, 300), true)
			that.startTime = getCurrentTime()
			that.endTime = getCurrentTime()
		},
		watch: {
			// searchValue(newValue, oldValue) {
			//   if (newValue == ''&&oldValue!='') {
			//     this.queryParam.pageNo = 1
			//     this.getCallLogs()
			//   }
			// }
			fixCenterlikeWho: function(nval, oval) {
				if (nval) {
					let newArr = this.fixCenterOptions.filter((item) => {
						return item.name.indexOf(nval) > -1
					})
					this.fixCentercolumns = newArr
				} else {
					this.fixCentercolumns = this.fixCenterOptions
				}
			},
			personlikeWho: function(nval, oval) {
				if (nval) {
					let newArr = this.personOptions.filter((item) => {
						return item.name.indexOf(nval) > -1
					})
					this.personcolumns = newArr
				} else {
					this.personcolumns = this.personOptions
				}
			}
		},
		methods: {
			searchListUpdate(params){

				//this.queryParam.fixCenters = params.fixCenters
        this.queryParam.pageNo=1
				this.queryParam.fixCenterId =params.fixCenterId
				this.queryParam.personId = params.personId
				this.queryParam.startTime = params.startTime
				this.queryParam.endTime = params.endTime
				this.queryParam.type = params.type
				this.queryParam.status = params.status
        this.queryParam.callTimes = params.callTimes
        this.personId = params.personId
        this.fixCenterId = params.fixCenterId

				this.finished = false
				this.logList = []
				this.getCallLogs()
				this.searchComShow=false
			},
			//确定
			searchConfirm() {
				this.finished = false
				this.logList = []
				this.getCallLogs()
				this.searchShow = false
			},
			//选择员工
			handleSelectPerson() {
				if (this.fixCenterId == null || this.fixCenterId == '') {
					alert("请先选择组织")
					return
				}
				this.showPersonSelectPicker = true
				this.personcolumns = this.personOptions
				commonApi
					.getSeatPersons({
						org_id: this.fixCenterId,
						// org_id:"ivNk3xcMTvqFWeEV4yq+XsznrtQ=",
					})
					.then((res) => {
						if (res.data) {
							this.personOptions = res.data
							this.personcolumns = this.personOptions
						}
					})

			},
			//确认员工
			handleSelectPersonConfirm(value) {
				this.personId = value.perId
				this.personName = value.perName
				this.showPersonSelectPicker = false
				this.personlikeWho = ''
			},
			//选择组织
			handleSelectFixCenter() {
				this.showFixCenterSelectPicker = true
				this.fixCentercolumns = this.fixCenterOptions
			},
			//确认组织
			handleSelectFixCenterConfirm(value) {
				this.fixCenterId = value.billId
				this.fixCenterName = value.name
				this.showFixCenterSelectPicker = false
				this.fixCenterlikeWho = ''

				this.personId = ''
				this.personName = '请选择员工'
				console.log(this.fixCenterId, 'fixCenterId');
			},
			getRangList(type) {
				if (type == 0) {
					this.actions = this.fixCenterOptions.map(item => {
						return {
							name: item.name
						}
					})
					this.organizationShow = true
				} else {
					this.userActions = this.fixCenterOptions.map(item => {
						return {
							name: item.name
						}
					})
					this.userShow = true
				}
			},
			/**
			 * 重置
			 */
			reload() {
				if (this.index == 0) {
					this.startTime = getCurrentTime()
					this.endTime = getCurrentTime()
				} else {
					this.startTime = getCurrentFirstDay()
					this.endTime = getCurrentLastDay()
				}
				// this.fixCenterId = null
				// this.personId = null
				// this.fixCenterName = "请选择组织"
				// this.personName = "请选择员工"
				this.callTypeList.find(item => {
					item.check = false
				})
				this.stateList.find(item => {
					item.check = false
				})
			},
			organizationSelect(e) {
				console.log(e);
				this.organizationValeu = e.name
				this.organizationShow = false
			},
			userSelect(e) {
				this.userVlaue = e.name
				this.userShow = false
			},
			dateTimeChange() {
				if (this.index == 0) {
					return
				} else {
					this.startTimeShow = true
				}
			},
			dateEndTimeChange() {
				if (this.index == 0) {
					return
				} else {
					this.endTimeShow = true
				}
			},
			/**
			 * @param {Object} date 时间转换
			 */
			formatDate(date) {

				return `${date.getFullYear()}-${String(date.getMonth() +1).padStart(2,"0")}-${String(date.getDate()).padStart(2,"0")}`;
			},
			/**
			 * @param {Object} date 起始时间选择事件
			 */
			onConfirm(date) {
				let s = new Date(date).getTime()
				let e = new Date(this.endTime).getTime()
				if (s > e) {
					Dialog.alert({
						title: '',
						message: '起始时间不能大于结束时间'
					}).then(() => {
						// on close
					})
					return
				}
				this.startTimeShow = false;
				this.startTime = this.formatDate(date);
			},
			/**
			 * @param {Object} date 结束时间选择事件
			 */
			onEndConfirm(date) {
				let s = new Date(this.startTime).getTime()
				let e = new Date(date).getTime()
				if (s > e) {
					Dialog.alert({
						title: '',
						message: '起始时间不能大于结束时间'
					}).then(() => {
						// on close
					})
					return
				}
				this.endTimeShow = false;
				this.endTime = this.formatDate(date);
			},
			popupOpen() {
				this.searchComShow = true
				if (this.index == 0) {
					this.$refs.callSearch.StartCreateTime = getCurrentTime()
					this.$refs.callSearch.EndCreateTime = getCurrentTime()
				} else {
					this.$refs.callSearch.StartCreateTime = getCurrentFirstDay()
					this.$refs.callSearch.EndCreateTime = getCurrentLastDay()
				}
			},

			/**
			 * @param {Object} e 选择通话类型
			 */
			typeChange(e) {
				this.callTypeList[e].check = !this.callTypeList[e].check
			},
			stateChange(e) {
				this.stateList[e].check = !this.stateList[e].check
			},
			// 获取维修中心
			getMainFixCenter() {
				commonApi
					.getMainFixCenter({
						orgId: 'test',
						userId: this.userId,
						type: '',
					})
					.then((res) => {
						if (res.data) {
							this.fixCenterOptions = res.data
							for (var i = 0; i < res.data.length; i++) {
								this.fixCenterList.push(res.data[i].billId);
							}
							this.getCallLogs()
						}
					})
			},
			goAsr(data) {
				this.$router.push({
					path: '/asr',
					query: {
						billId: data.id,
						billType: data.type
					},
				})
			},
      goAI(data) {
        this.chatParams = {
          billId: data.id,
          billType: data.type
        }
        this.showChat = true
      },
			paly(data, index) {
				let that = this
				if (data.localRecordFile) {
					let that = this
					let param = {
						id: data.id,
						type: data.type
					}
					aiccCallApi.getCallTap(param).then((res) => {
						if (res.code == 0) {
							that.tapeFile = res.data
							console.log("tapeFile-", this.tapeFile);
							var audios = document.getElementById('audio')
							// audios.src=this.tapeFile
							that.playIndex = index
							setTimeout(() => {
								audios.play()
							}, 500);

						} else {
							Dialog.alert({
								title: '',
								message: res.msg
							}).then(() => {
								// on close
							})
						}
					})
				} else {
					Dialog.alert({
						title: '',
						message: "该记录暂无音频"
					}).then(() => {
						// on close
					})
				}
			},
			stop(index) {
				var audios = document.getElementById('audio')
				audios.pause()
				this.playIndex = '-1'
			},
			goCallDetail(data, startPlay) {
				localStorage.setItem('callBillId', data.id)
				localStorage.setItem('billType', data.type)
				localStorage.setItem('startPlay', startPlay)
				this.$router.push({
					path: '/callDetail',
				})
				// this.$router.push({
				//   path: '/callDetail',
				//   query: {
				//     billId: data.id,
				//     billType: data.type,
				//     startPlay: startPlay
				//   },
				// })
			},
			getCallLogs() {
				Toast.loading({
					message: '加载中...',
					forbidClick: true,
					overlay: true
				})
        this.queryParam.personId = this.personId
        this.queryParam.fixCenterId = this.fixCenterId
        this.queryParam.fixCenters = this.fixCenterList
        this.queryParam.searchValue = this.searchValue
        if (this.index == 0) {
        	this.queryParam.startTime = getCurrentTime()
        	this.queryParam.endTime = getCurrentTime()
        }
				this.isLoading = true;
				aiccCallApi.getCallLogPage(this.queryParam).then((res) => {
					Toast.clear()
					this.totalTitle = 0
					if (res.code == 0) {
						this.totalTitle = res.data.total
						for (var i = 0; i < res.data.data.length; i++) {
							this.logList.push(res.data.data[i])
						}
						if (res.data.data.length < this.queryParam.pageSize) {
							this.finished = true
						}
						this.isLoading = false;
					} else {
						Dialog.alert({
							title: '',
							message: res.msg
						}).then(() => {
							// on close
						})

					}
				})
			},
			resetQueryParam() {

			},
			onClick(index) {
				this.index = index
				this.playIndex = '-1'
				this.queryParam = {
					pageNo: 1,
					pageSize: 10,
					searchValue: null,
					todayData: this.index,
				}
				this.reload()

				this.finished = false
				this.logList = []
				this.getCallLogs()
			},
			onRefresh() {
				console.log('onRefresh');
				if (this.finished == false) {
					this.queryParam.pageNo = this.queryParam.pageNo + 1
					this.getCallLogs()
				} else {
					this.isLoading = false;
				}
			},
			searchCallLog() {
				let that = this
				console.log("searchCallLog");
				that.queryParam.pageNo = 1
				that.queryParam.todayData = this.index
				that.finished = false
				// that.$nextTick(() => {
				that.logList = []
				// that.$set(that,'logList',[])
				that.getCallLogs()
				// })
			},
			clearSearch() {
				let that = this
				that.queryParam.pageNo = 1
				that.queryParam.todayData = this.index
				that.finished = false
				that.logList = []
				that.getCallLogs()
			},
			/**
			 * 上拉加载
			 */
			scrollBottom(e) {
				let that = this

				// debugger
				//  没有数据了  不再加载了
				if (that.finished == true) {
					console.log('没有数据不加载了')
					return
				} else {
					console.log(that.startTimeShow)
					if (that.userShow || that.startTimeShow || that.endTimeShow || that.organizationShow) {
						return
					}
					let scrollTop = document.documentElement.scrollTop
					let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
					//index判断哪个tab  取不同的列表高度
					let el = that.index == 0 ? document.getElementById('log') : document.getElementById('log1')
          if (!el) {
            console.log('没有数据不加载了')
            return
          }
          let logHeight = el.scrollHeight
					if (scrollTop > logHeight - height - 100) {
						console.log('到底了 加载新数据')
						that.queryParam.pageNo = that.queryParam.pageNo + 1
						that.getCallLogs()
					} else {
						console.log(scrollTop, logHeight, height)
					}
				}
			},
			throttle(fn, mill) {
				let timer = null


				return function() {
					clearTimeout(timer)
					timer = setTimeout(function() {
						fn.apply(this, arguments)
					}, mill);
				}
			}
		},
	};
</script>
<style scoped>
	.home {
		background-color: #f2f2f2;
		//font-family: 'Alibaba';
		//height: calc(100vh - 60px);
		width: 100%;
		font-size: 14px;
		padding-top: 50px;
	}

	.searchClass {
		position: fixed;
		top: 94px;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 70px;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
		background-color: #f2f2f2;
	}

	.listClass {
		position: relative;
		top: 70px;
		width: 100%;

	}

	.logList {
		width: 100%;
		background-color: #fff;
		min-height: calc(100vh - 60px - 44px - 70px);
		box-sizing: border-box;
	}

	.logItemClass {
		width: 100%;
		display: flex;
		padding: 10px 10px 15px 10px;
		flex-direction: row;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
	}

	.itemLeft {
		width: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.itemRight {
		width: calc(100% - 35px);
		height: 100%;
		display: flex;
		flex-direction: column;
		padding-left: 5px;
		line-height: 20px;
	}

	.rightTop {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.nameClass {
		color: #333;
		font-weight: 600;
		font-size: 12px;
	}

	.timeClass {
		color: #8385a8;
		font-size: 12px;
	}

	.rightBottom {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 5px;
	}

	.rbottomClass {
		color: #8385a8;
		font-size: 12px;
	}

	.rTimeClass {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.phoneNumberIcon {
		position: fixed;
		right: 30px;
		bottom: 70px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selectSearchClass {
		width: 70px;
		height: 34px;
		background-color: #5a8dd2;
		border-radius: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #fff;
		align-items: center;
		justify-content: center;
	}

	.selectSearchClass img {
		width: 20px;
		height: 20px;
		margin-left: 5px;
	}

	.searchPopupClass {

		background-color: #fff;
		position: relative;
		height: 100%;
		width: 100%;
	}

	.search-callTime {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		margin-top: 12px;
	}

	.timeBorder {
		background-color: #f9f9f9;
		border-radius: 15px;
		padding: 6px 0px;
		width: 105px;
		text-align: center;
	}

	.line {
		border-top: 1px solid #d2d2d2;
		width: 20px;
		margin: 0 20px;
	}

	.searchTitle {
		font-weight: 600;
		font-size: 16px;
	}

	.spaceBetween {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.organization {
		margin-top: 12px;
	}

	.callTypeClass {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		padding: 0 10px;
		flex-wrap: wrap;
	}

	.typeClass {
		background-color: #f9f9f9;
		border: 1px solid #f9f9f9;
		border-radius: 10px;
		padding: 8px 0px;
		margin: 10px 10px 10px 0;
		width: calc((100% - 40px) / 3);
		text-align: center;
		font-size: 13px;

	}

	.typeClass1 {
		background-color: #ffddda;
		color: #f3746c;
		border: 1px solid #e77e78;
		border-radius: 10px;
		padding: 8px 0px;
		margin: 10px 10px 10px 0;
		width: calc((100% - 40px) / 3);
		text-align: center;
		font-size: 13px;
	}

	@media (max-width:355px) {
		.callTypeClass {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 10px;
			padding: 0 10px;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.typeClass {
			background-color: #f9f9f9;
			border: 1px solid #f9f9f9;
			border-radius: 10px;
			padding: 8px 0px;
			margin: 10px 10px 10px 0;
			width: calc((100% - 40px) / 2);
			text-align: center;
			font-size: 13px;

		}

		.typeClass1 {
			background-color: #ffddda;
			color: #f3746c;
			border: 1px solid #e77e78;
			border-radius: 10px;
			padding: 8px 0px;
			margin: 10px 10px 10px 0;
			width: calc((100% - 40px) / 2);
			text-align: center;
			font-size: 13px;
		}
	}

	.searchButtomClass {
		position: relative;
		bottom: 10px;
		width: 100%;
		height: 40px;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.reloadClass {
		width: 40%;
		border: 1px solid #e77e78;
		color: #e77e78;
		border-radius: 10px;
		padding: 8px 0px;
		text-align: center;
	}

	.submitClass {
		color: #fff;
		border-radius: 10px;
		padding: 8px 20px;
		text-align: center;
		background-color: #3f79c8;
	}

	.totalClass {
		/* 	position: relative;
		top: 55px; */
		width: 100%;
		height: 15px;
		padding: 0 20px;
		color: #8d8d8d;
		font-size: 12px;
	}
</style>
